<template>
  <view class="main">
    <van-search v-model="value" @blur="sureConfirmChange(value)" placeholder="搜索" shape="round" />
    <view class="item-box">
      <view class="item" v-for="(item, index) in getMember" :key="index" @click="clickItem = item">
        <view class="user-box dispaly-just-between">
          <view class="user-left dispaly-just-between">
            <view class="user-avatar" @click.stop="
              $goUrl(
                `/pages/index/pages/businessCard?id=${item?.userId}&circleId=${getId}`
              )
              ">
              <image :src="item?.avatar" mode="aspectFill" />
            </view>
            <view class="user-info-box" @click="clickPerson(item)">
              <view class="user-info-top dispaly-line-center">
                <view class="time">{{ item?.nickName }}</view>
                <view class="name">{{ item?.department }}</view>
                <view class="job-name">{{ item?.company }}</view>
              </view>
              <view class="tel dispaly-center">
                <view class="tel-number" @click.stop="copyPhone(item?.phonenumber)">{{ item?.phonenumber }}</view>
                <view class="tel-number" @click.stop="copyPhone(item?.phone)">&nbsp;&nbsp;&nbsp;{{ item?.phone }}</view>
              </view>
              <view class="tip-box dispaly-center">
                <view class="tip-item dispaly-center">
                  <view class="tip-text">积分：</view>
                  <view class="tip-text">{{ item?.point || 0 }}</view>
                </view>
                <view class="tip-item dispaly-center" style="margin-right: 20rpx">
                  <view class="tip-text">分享：</view>
                  <view class="tip-text">{{ item?.scanNum || 0 }}</view>
                </view>
                <view class="tip-item dispaly-center">
                  <view class="tip-text">引荐：</view>
                  <view class="tip-text">{{ item?.hotNum || 0 }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="option dispaly-align-center">
            <view class="job" v-if="item?.isGroup == 1">群主</view>
            <view style="margin-right: 6px" class="job" v-if="
              item.isAdmin == 1 &&
              userInfo.userId == circleInfo.createUser &&
              item?.isGroup != 1
            " @click.stop="showFun(item)">设置权限</view>
            <view class="job" v-if="item?.isAdmin == 1 && item?.isGroup != 1">管理员</view>
            <view class="job" v-if="item?.isGroup != 1 && item?.isAdmin != 1">普通成员</view>
          </view>
        </view>
      </view>
      <LoadMore />
    </view>
  </view>
  <!-- 管理 -->
  <van-action-sheet v-model:show="manageShow" :actions="manageActions" @select="manageOnSelect" cancel-text="取消"
    @cancel="manageShow = false" />

  <van-popup v-model:show="showConfig" closeable position="bottom"
    :style="{ height: '60%', padding: '40rpx 40rpx 100rpx 40rpx' }">
    <van-checkbox-group v-model="selectData" shape="square">
      <van-checkbox icon-size="14px" style="margin-bottom: 16rpx" v-for="(item, index) in configData" :key="index"
        :name="item.type">{{ item.name }}</van-checkbox>
    </van-checkbox-group>
    <div class="footer-div">
      <van-button type="primary" @click="sub">提交</van-button>
    </div>
  </van-popup>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
  getMemberPage,
  deletePerson,
  setAdmin,
  zero,
  getBaseAdminConfig,
  setUpPower,
  getCircleDesk,
  getPowerList,
} from "@/api/apiList";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";

const z = async () => {
  const res = await zero({ id: getId.value });
};
const circleInfo = ref({});
let showConfig = ref(false);
const configData = ref([]);
const selectData = ref([]);
let selectRow = ref({});
const userInfo = ref(uni.getStorageSync("userInfo"));
const getId = ref();

onLoad(async (e) => {
  if (e && e?.id) {
    getId.value = e?.id;
    await z();
    getMemberData(e?.id);
    // 获取圈子详情
    getInfoData(e?.id);
  }
  getConfig();
});

// 复制手机号
const copyPhone = (phone) => {
  uni.setClipboardData({
    data: phone,
    success: (res) => {
      uni.showToast({
        title: "复制成功",
        icon: "success",
        duration: 2000,
      });
    },
  });
};

// 获取圈子详情
const getInfoData = async (ids) => {
  const response = await getCircleDesk({ id: ids });
  if (response && response?.code == 200) {
    circleInfo.value = response?.data;
  }
};

const showFun = async (item) => {
  // 获取这个用户的权限
  const response = await getPowerList({
    circleId: item.circleId,
    userId: item.userId,
  });
  selectData.value = [];
  if (response.code == 200) {
    let arr = [];
    if (response.data && response.data.length > 0) {
      response.data.forEach((item) => {
        arr.push(item.typeId);
      });
      selectData.value = arr;
    }
  }
  selectRow.value = item;
  showConfig.value = true;
};
const sub = async () => {
  if (selectData.value.length < 1) {
    showConfig.value = false;
    return uni.showToast({
      title: "请选择权限",
      icon: "none",
    });
  }
  let arr = [];
  selectData.value.forEach((item) => {
    arr.push({
      memberId: selectRow.value.id,
      typeId: item,
      circleId: getId.value,
      // userId:selectRow.value.userId,
    });
  });

  //调用接口
  let res = await setUpPower({ power: arr, circleId: getId.value });
  showConfig.value = false;

  if (res.code == 200) {
    selectData.value = [];
    return uni.showToast({
      title: "保存成功",
      icon: "none",
    });
  }
  return uni.showToast({
    title: "保存失败",
    icon: "none",
  });
};

const getConfig = async () => {
  let res = await getBaseAdminConfig();
  if (res.code == 200) {
    let arr = [];
    res.data.forEach((item) => {
      arr.push({ name: item.dictLabel, type: item.dictCode });
    });
    configData.value = arr;
  }
};

const clickPerson = (item) => {
  manageActions.value = [{ name: "名片", type: 1 }];
  let flag = false;
  for (let i = 0; i < getMember.value.length; i++) {
    if (getMember.value[i].userId == uni.getStorageSync("userInfo").userId) {
      flag = true;
    }
  }
  // 不是圈主，直接暂停
  if (flag != true) return false;

  if (userInfo.value.userId == circleInfo.value.createUser) {
    if (item.isGroup == 1) return (manageShow.value = true);
    if (item.isAdmin == 1) {
      manageActions.value.push({ name: "取消管理员", type: 2 });
    } else {
      manageActions.value.push({ name: "设为管理员", type: 2 });
    }
    manageActions.value.push({
      name: "删除成员",
      type: manageActions.value.length + 1,
    });
  } else if (item.isAdmin == 0 && item.isGroup == 0) {
    manageActions.value.push({
      name: "删除成员",
      type: manageActions.value.length + 1,
    });
  }
  manageShow.value = true;
};

// 管理
const manageShow = ref(false);
const manageActions = ref([
  { name: "名片", type: 1 },
  // { name: "设为管理员", type: 2 },
  // { name: "删除成员", type: 3 },
]);

const clickItem = ref({});

const manageOnSelect = async (data) => {
  const { type, name } = data;
  switch (name) {
    case "名片":
      uni.navigateTo({
        url: `/pages/index/pages/businessCard?id=${clickItem.value.userId}&circleId=${getId.value}`,
      });
      break;
    case "设为管理员":
      const setRes = await setAdmin({
        id: clickItem.value.id,
        IsAdmin: clickItem.value.isAdmin == 1 ? 0 : 1,
        userId: clickItem.value.userId,
      });
      if (setRes.code == 200) {
        getMember.value = [];
        getMemberData(getId.value);
        manageShow.value = false;
      }
      break;
    case "取消管理员":
      const res = await setAdmin({
        id: clickItem.value.id,
        IsAdmin: clickItem.value.isAdmin == 1 ? 0 : 1,
        userId: clickItem.value.userId,
      });
      if (res.code == 200) {
        getMember.value = [];
        getMemberData(getId.value);
        manageShow.value = false;
      }
      break;
    case "删除成员":
      // deleteDynamicShow.value = true;
      const deleteRes = await deletePerson({
        id: clickItem.value.id,
        circleId: getId.value,
      });
      if (deleteRes.code == 200) {
        getMember.value = [];
        getMemberData(getId.value);
        manageShow.value = false;
      }
      break;
  }
};

const getMember = ref([]);
const getMemberData = async (ids) => {
  const response = await getMemberPage({
    circleId: ids,
    pageNum: count.value,
    pageSize: 999,
    type: 0,
    search: searchWriteText.value ? searchWriteText.value : "",
  });
  if (response && response?.code == 200) {
    getMember.value = response?.rows.concat(getMember.value);

  }
};

const searchWriteText = ref();
const sureConfirmChange = (e) => {
  getMember.value = [];
  searchWriteText.value = e;
  getMemberData(getId.value);
};

const count = ref(1);
onReachBottom(() => {
  count.value++;
  uni.showLoading({ title: "加载中" });
  setTimeout(() => {
    getMemberData(getId.value);
    uni.hideLoading();
  }, 800);
});
</script>

<style lang="scss" scoped>
:deep(.van-action-sheet__name) {
  color: #0753fd;
}

.item {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #ddd;

  .user-box {
    .user-left {
      .user-avatar {
        margin-right: 20rpx;

        image {
          width: 104rpx;
          height: 104rpx;
          border-radius: 50%;
        }
      }
    }

    .option {
      font-family: PingFang SC Regular;
      font-size: 22rpx;
      color: #aaaaaa;

      .job {
        font-family: PingFang SC Medium;
        font-size: 22rpx;
        color: #ffffff;
        background: #0753fd;
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
      }

      .i-one {
        margin-right: 40rpx;
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .user-info-box {
      .tip-box {
        .tip-item {
          .tip-text {
            font-family: PingFang SC Regular;
            font-size: 24rpx;
            color: #777777;
          }
        }
      }

      .tel {
        .tel-number {
          font-family: PingFang SC Regular;
          font-size: 22rpx;
          font-weight: normal;
          color: #777777;
          margin-right: 8rpx;
        }

        .type {
          font-family: PingFang SC Regular;
          font-size: 22rpx;
          color: #0753fd;
        }
      }

      .user-info-top {
        .name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #111111;
          margin: 0 8rpx;
        }

        .job-name {
          font-family: PingFang SC Regular;
          font-size: 24rpx;
          color: #999999;
        }
      }

      .time {
        font-family: PingFang SC Regular;
        font-size: 24rpx;
        font-weight: 700;
        color: #111;
      }
    }
  }
}

.footer-div {
  width: 100%;
  //background: red;
  position: absolute;
  bottom: 20px;
  left: 0;
  width: calc(100% - 40rpx);

  .van-button {
    width: 100%;
    margin-left: 20rpx;
  }
}
</style>
